<!-- 编辑修改用户信息 -->
<template>
    <div>
      <a-modal
        v-model:visible="visible"
        title="编辑用户"
        @ok="handleOk"
        @cancel="hanleCancel"
      >
        <p style="padding-bottom: 10px; font-size: 16px">
          您选择的用户为：
          <a-space>
            <a-space :size="2">
              <span class="bold">{{ chosusername }}</span>
              <span class="gray">(用户名)</span>
            </a-space>
            <a-space :size="2">
              <span class="bold">{{ chosname }}</span>
              <span class="gray">(姓名)</span>
            </a-space>
            <a-space :size="2">
              <span class="bold">{{ chosrole }}</span>
              <span class="gray">(角色)</span>
            </a-space>
          </a-space>
        </p>
        <p style="color: #999">如果你只想更改密码，请将以下空填为原值</p>
        <a-form :model="form" :rules="rules" layout="vertical" ref="formRef">
          <a-form-item label="身份" name="role">
            <a-select
              placeholder="请选择其身份"
              v-model:value="form.role"
              @change="changeRole"
            >
              <a-select-option value="1">超级管理员</a-select-option>
              <a-select-option value="2">普通管理员</a-select-option>
            </a-select>
          </a-form-item>
  
          <a-form-item label="姓名" name="name">
            <a-input
              v-model:value="form.name"
              placeholder="修改其姓名"
              autocomplete="off"
            />
          </a-form-item>
  
          <a-form-item label="密码" name="password">
            <a-input
              v-model:value="form.password"
              placeholder="选填，若为空则不修改"
              autocomplete="off"
            />
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
  </template>
  <script lang="ts">
  import { ValidateErrorEntity } from "ant-design-vue/es/form/interface";
  import { defineComponent, ref, reactive, watch } from "vue";
  import {put } from "../../../utils/request/request";
  import { message } from "ant-design-vue";
  
  interface FormState {
    name: string;
    role: string;
  }
  const formRef = ref();
  const form = reactive({
    name: "",
    role: "",
    password: "",
  });
  const rules = {
    name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
    role: [{ required: true, message: "请选择用户身份", trigger: "blur" }],
    password: [{ required: false, message: "请设置密码", trigger: "blur" }],
  };
  
  //modal
  const useModalEffect = (props: any, context: any) => {
    const { putData } = useHttpRequest(props, context);
    const visible = ref<boolean>(false);
    const showModal = () => {
      visible.value = true;
    };
    const handleOk = () => {
      formRef.value
        .validate()
        .then(async () => {
          await putData(props.chosId);
          visible.value = false;
          formRef.value.resetFields();
        })
        .catch((error: ValidateErrorEntity<FormState>) => {
          console.log("error", error);
        });
    };
  
    const hanleCancel = () => {
      formRef.value.resetFields();
    };
    return { visible, showModal, handleOk, hanleCancel };
  };
  
  // 网络请求
  const useHttpRequest = (props: any, context: any) => {
    const putData = async (chosId: number) => {
      const token: string = localStorage.getItem("token") as string;
      const res: any = await put(
        `/admin/api/v1/admin/${chosId}`,
        {
          role: Number(form.role), //身份，1代表超级管理员，2代表管理员
          name: form.name, //姓名
        },
        token
      );
      console.log(res);
      // 修改密码
      if (form.password) {
        const res: any = await put(
          "/admin/api/v1/admin/password",
          {
            id: props.chosId, //用户id
            password: form.password, //新密码
          },
          token
        );
      }
  
      if (res?.status_code === 0) {
        message.success("修改成功", 3);
        context.emit("getData");
      } else {
        message.error(res?.status_msg, 3);
      }
    };
    return { putData };
  };
  
  export default defineComponent({
    props: ["chosusername", "chosId", "chosname", "chosrole"],
    setup(props, context) {
      const { visible, showModal, handleOk, hanleCancel } = useModalEffect(
        props,
        context
      );
      const id = ref<number>();
      watch(
        () => props.chosId,
        (newId, oldId) => {
          id.value = newId;
        }
      );
  
      const changeRole = (value: string) => {
        form.role = value;
      };
  
      return {
        formRef,
        form,
        rules,
        visible,
        showModal,
        changeRole,
        handleOk,
        hanleCancel,
      };
    },
  });
  </script>
  
  <style lang="less" scoped>
  .item {
    display: flex;
    padding: 5px 15px;
    .text {
      flex: 1;
    }
    .input {
      flex: 5;
    }
  }
  .bold {
    font-weight: bold;
  }
  .gray {
    color: #999;
    font-size: 12px;
  }
  </style>
  
  